<template>
  <div class="dashboard-editor-container">
    <panel-group
      :studentSum="studentSum"
      :noWriteSum="noWriteSum"
      :writeSum="writeSum"
      :suspectSum="suspectSum"
      :dangerSum="dangerSum"
      :leaveSum="leaveSum"
    />

    <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="12">
        <div class="chart-wrapper">
          <el-card shadow="hover">
          <div slot="header">
            <span>今日汇报情况</span>
          </div>
          <ve-line :data="toDayChartData"></ve-line>
        </el-card>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="12">
        <div class="chart-wrapper">
          <el-card shadow="hover">
          <div slot="header">
            <span>本月汇报情况</span>
          </div>
          <ve-line :data="toMounthChartData"></ve-line>
        </el-card>
        </div>
      </el-col>
    </el-row>

  </div>
</template>

<script>
import PanelGroup from "./components/PanelGroup";
import RaddarChart from "./components/RaddarChart";
import PieChart from "./components/PieChart";
import BarChart from "./components/BarChart";
import TodoList from "./components/TodoList";
import BoxCard from "./components/BoxCard";
// Api
import {
  getAllStudentsApi,
  gethealthNowDayApi,
  gethealthNowMonthApi
} from "../../../api/common-api/dashboard";

export default {
  name: "DashboardAdmin",
  components: {
    PanelGroup,
    RaddarChart,
    PieChart,
    BarChart,
    TodoList,
    BoxCard
  },
  data() {
    return {
      studentSum: null,
      noWriteSum: null,
      writeSum: null,
      suspectSum: null,
      dangerSum: null,
      leaveSum: null,
      toDayChartData: {
        columns: ["小时", "填报人数"],
        rows: []
      },
      toMounthChartData: {
        columns: ["日", "填报人数"],
        rows: []
      }
    };
  },
  created() {
    this.getAllStudents();
    this.gethealthNowMonth()
  },

  methods: {
    // 根据用户类型进行用户信息获取(该方法主要用来获取总学生人数) 同时调用当天填写报表人数的异步函数实现同步操作
    async getAllStudents() {
      let { data } = await getAllStudentsApi();
      this.studentSum = data.total;
      // 调用下方方法 实现异步函数同步执行
      this.gethealthNowDay();
    },

    // 当天填写报表的人数
    async gethealthNowDay() {
      let { data } = await gethealthNowDayApi();
      this.writeSum = data.data.length;
      let i = 0;
      let j = 0;
      let k = 0;
      // 今日的填报数据初始化
      let hours0 = 0;
      let hours1 = 0;
      let hours2 = 0;
      let hours3 = 0;
      let hours4 = 0;
      let hours5 = 0;
      let hours6 = 0;
      let hours7 = 0;
      let hours8 = 0;
      let hours9 = 0;
      let hours10 = 0;
      let hours11 = 0;
      let hours12 = 0;
      let hours13 = 0;
      let hours14 = 0;
      let hours15 = 0;
      let hours16 = 0;
      let hours17 = 0;
      let hours18 = 0;
      let hours19 = 0;
      let hours20 = 0;
      let hours21 = 0;
      let hours22 = 0;
      let hours23 = 0;
      data.data.forEach((value, index) => {
        if (value.temperature <= 35 || value.temperature >= 38) i++;
        if (value.todanger == "是") j++;
        if (value.leaveout == "是") k++;
        // 今日填报数据的转化 只要小时数
        let dateCreate = data.data[index].createtime;
        let dateHm = new Date(dateCreate);
        let dateHours = dateHm.getHours();
        // 判断语句 如果小时数等于那个时间 使用时间累加
        if (dateHours == 0) {
          hours0++;
        }
        if (dateHours == 1) {
          hours1++;
        }
        if (dateHours == 2) {
          hours2++;
        }
        if (dateHours == 3) {
          hours3++;
        }
        if (dateHours == 4) {
          hours4++;
        }
        if (dateHours == 5) {
          hours5++;
        }
        if (dateHours == 6) {
          hours6++;
        }
        if (dateHours == 7) {
          hours7++;
        }
        if (dateHours == 8) {
          hours8++;
        }
        if (dateHours == 9) {
          hours9++;
        }
        if (dateHours == 10) {
          hours10++;
        }
        if (dateHours == 11) {
          hours11++;
        }
        if (dateHours == 12) {
          hours12++;
        }
        if (dateHours == 13) {
          hours13++;
        }
        if (dateHours == 14) {
          hours14++;
        }
        if (dateHours == 15) {
          hours15++;
        }
        if (dateHours == 16) {
          hours16++;
        }
        if (dateHours == 17) {
          hours17++;
        }
        if (dateHours == 18) {
          hours18++;
        }
        if (dateHours == 19) {
          hours19++;
        }
        if (dateHours == 20) {
          hours20++;
        }
        if (dateHours == 21) {
          hours21++;
        }
        if (dateHours == 22) {
          hours22++;
        }
        if (dateHours == 23) {
          hours23++;
        }
      });
      this.toDayChartData.rows.push(
        { 小时: "00时", 填报人数: hours0 },
        { 小时: "01时", 填报人数: hours1 },
        { 小时: "02时", 填报人数: hours2 },
        { 小时: "03时", 填报人数: hours3 },
        { 小时: "04时", 填报人数: hours4 },
        { 小时: "05时", 填报人数: hours5 },
        { 小时: "06时", 填报人数: hours6 },
        { 小时: "07时", 填报人数: hours7 },
        { 小时: "08时", 填报人数: hours8 },
        { 小时: "09时", 填报人数: hours9 },
        { 小时: "10时", 填报人数: hours10 },
        { 小时: "11时", 填报人数: hours11 },
        { 小时: "12时", 填报人数: hours12 },
        { 小时: "13时", 填报人数: hours13 },
        { 小时: "14时", 填报人数: hours14 },
        { 小时: "15时", 填报人数: hours15 },
        { 小时: "16时", 填报人数: hours16 },
        { 小时: "17时", 填报人数: hours17 },
        { 小时: "18时", 填报人数: hours18 },
        { 小时: "19时", 填报人数: hours19 },
        { 小时: "20时", 填报人数: hours20 },
        { 小时: "21时", 填报人数: hours21 },
        { 小时: "22时", 填报人数: hours22 },
        { 小时: "23时", 填报人数: hours23 }
      );
      this.suspectSum = i;
      this.dangerSum = j;
      this.leaveSum = k;
      // 没有填写的人数 = 学生总数 - 已填写报表的人数
      this.noWriteSum = this.studentSum - data.data.length;
    },

    // 本月填写的报表人数
    async gethealthNowMonth() {
      let { data } = await gethealthNowMonthApi();
      // 将本月里的每天填报人数变量初始化
      let day1 = 0;
      let day2 = 0;
      let day3 = 0;
      let day4 = 0;
      let day5 = 0;
      let day6 = 0;
      let day7 = 0;
      let day8 = 0;
      let day9 = 0;
      let day10 = 0;
      let day11 = 0;
      let day12 = 0;
      let day13 = 0;
      let day14 = 0;
      let day15 = 0;
      let day16 = 0;
      let day17 = 0;
      let day18 = 0;
      let day19 = 0;
      let day20 = 0;
      let day21 = 0;
      let day22 = 0;
      let day23 = 0;
      let day24 = 0;
      let day25 = 0;
      let day26 = 0;
      let day27 = 0;
      let day28 = 0;
      let day29 = 0;
      let day30 = 0;
      let day31 = 0;
      data.data.forEach((value, index) => {
        let dateCreate = value.createtime;
        let dateDayHm = new Date(dateCreate);
        let dateDay = dateDayHm.getDate();
        if (dateDay == 1) {
          day1++;
        }
        if (dateDay == 2) {
          day2++;
        }
        if (dateDay == 3) {
          day3++;
        }
        if (dateDay == 4) {
          day4++;
        }
        if (dateDay == 5) {
          day5++;
        }
        if (dateDay == 6) {
          day6++;
        }
        if (dateDay == 7) {
          day7++;
        }
        if (dateDay == 8) {
          day8++;
        }
        if (dateDay == 9) {
          day9++;
        }
        if (dateDay == 10) {
          day10++;
        }
        if (dateDay == 11) {
          day11++;
        }
        if (dateDay == 12) {
          day12++;
        }
        if (dateDay == 13) {
          day13++;
        }
        if (dateDay == 14) {
          day14++;
        }
        if (dateDay == 15) {
          day15++;
        }
        if (dateDay == 16) {
          day16++;
        }
        if (dateDay == 17) {
          day17++;
        }
        if (dateDay == 18) {
          day18++;
        }
        if (dateDay == 19) {
          day19++;
        }
        if (dateDay == 20) {
          day20++;
        }
        if (dateDay == 21) {
          day21++;
        }
        if (dateDay == 22) {
          day22++;
        }
        if (dateDay == 23) {
          day23++;
        }
        if (dateDay == 24) {
          day24++;
        }
        if (dateDay == 25) {
          day25++;
        }
        if (dateDay == 26) {
          day26++;
        }
        if (dateDay == 27) {
          day27++;
        }
        if (dateDay == 28) {
          day28++;
        }
        if (dateDay == 29) {
          day29++;
        }
        if (dateDay == 30) {
          day30++;
        }
        if (dateDay == 31) {
          day31++;
        }
      });
      this.toMounthChartData.rows.push(
        { 日: "01日", 填报人数: day1 },
        { 日: "02日", 填报人数: day2 },
        { 日: "03日", 填报人数: day3 },
        { 日: "04日", 填报人数: day4 },
        { 日: "05日", 填报人数: day5 },
        { 日: "06日", 填报人数: day6 },
        { 日: "07日", 填报人数: day7 },
        { 日: "08日", 填报人数: day8 },
        { 日: "09日", 填报人数: day9 },
        { 日: "10日", 填报人数: day10 },
        { 日: "11日", 填报人数: day11 },
        { 日: "12日", 填报人数: day12 },
        { 日: "13日", 填报人数: day13 },
        { 日: "14日", 填报人数: day14 },
        { 日: "15日", 填报人数: day15 },
        { 日: "16日", 填报人数: day16 },
        { 日: "17日", 填报人数: day17 },
        { 日: "18日", 填报人数: day18 },
        { 日: "19日", 填报人数: day19 },
        { 日: "20日", 填报人数: day20 },
        { 日: "21日", 填报人数: day21 },
        { 日: "22日", 填报人数: day22 },
        { 日: "23日", 填报人数: day23 },
        { 日: "24日", 填报人数: day24 },
        { 日: "25日", 填报人数: day25 },
        { 日: "26日", 填报人数: day26 },
        { 日: "27日", 填报人数: day27 },
        { 日: "28日", 填报人数: day28 },
        { 日: "29日", 填报人数: day29 },
        { 日: "30日", 填报人数: day30 },
        { 日: "31日", 填报人数: day31 }
      );
    }
  }
};
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .github-corner {
    position: absolute;
    top: 0px;
    border: 0;
    right: 0;
  }

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
